<template>
    <div class="layout-main">
        <div class="section section-filter">
            <div class="panel-title">
                <span class="title">筛选条件</span>
            </div>
            <div class="panel-content">
                <el-form :inline="true" :model="tableData.filter">
                    <el-form-item label="申请时间">
                        <el-date-picker v-model="tableData.filter.applyDateStart" type="date" value-format="yyyy-MM-dd" placeholder="请选择申请时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="编号">
                        <el-input v-model="tableData.filter.caseCode" placeholder="请输入编号"></el-input>
                    </el-form-item>
                    <el-form-item label="来源渠道">
                        <el-select v-model="tableData.filter.source" placeholder="请选择来源渠道">
                            <el-option label="所有" value=""></el-option>
                            <el-option v-for="item in dicts.sourceType" :key="item.id" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品类型">
                        <el-select v-model="tableData.filter.product" placeholder="请选择产品类型">
                            <el-option label="所有" value=""></el-option>
                            <el-option v-for="item in dicts.productType" :key="item.id" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="风险类别">
                        <el-select v-model="riskCategoryForm.id" placeholder="请选择风险类别" @change="riskCategoryChange">
                            <el-option label="所有" value=""></el-option>
                            <el-option v-for="item in dicts.riskCategory" :key="item.value" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="风险类型">
                        <el-select v-model="riskTypeForm.value" placeholder="请选择风险类型" @change="riskTypeChange">
                            <el-option label="所有" value=""></el-option>
                            <el-option v-for="item in riskTypeList" :key="item.id" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="风险等级">
                        <el-select v-model="riskLevelForm.value" placeholder="请选择风险等级">
                            <el-option label="所有" value=""></el-option>
                            <el-option v-for="item in riskLevelList" :key="item.id" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="举报人姓名">
                        <el-input v-model="tableData.filter.reflectName" placeholder="请输入举报人姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="举报人手机号">
                        <el-input v-model="tableData.filter.reflectPhone" placeholder="请输入举报人手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="被举报人姓名">
                        <el-input v-model="tableData.filter.beReportedName" placeholder="请输入被举报人姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="被举报人手机号">
                        <el-input v-model="tableData.filter.beReportedPhone" placeholder="请输入被举报人手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="案件类型">
                        <el-select v-model="tableData.filter.caseType" placeholder="请选择案件类型">
                            <el-option label="所有" value=""></el-option>
                            <el-option v-for="item in dicts.caseType" :key="item.id" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="所属分部">
                            <el-input v-model="tableData.filter.salesDeptName" placeholder="请输入所属分部"></el-input>
                        </el-form-item>
                        <el-form-item label="分部负责人">
                            <el-input v-model="tableData.filter.salesDeptPrincipal" placeholder="请输入分部负责人"></el-input>
                        </el-form-item> -->
                    <el-form-item label="关键字">
                        <el-input v-model="tableData.filter.keyword" title="请输入举报人或者被举报人或者手机号或者身份证" placeholder="请输入关键字"></el-input>
                    </el-form-item>
                </el-form>
                <div class="form-btn">
                    <button @click="sumbitFilter">筛选</button>
                    <button class="btn-reset" @click="resetFilter">重置</button>
                </div>
            </div>
        </div>
        <div class="section section-table">
            <div class="panel-title">
                <span class="title">筛选结果</span>
            </div>
            <div class="panel-content">
                <el-table ref="multipleTable" :data="tableData.data" border style="width: 100%">
                    <el-table-column  fixed="right" label="操作" width="145">
                        <template slot-scope="scope">
                            <permission permission-key="caseExamine:detailJiean">
                                <router-link :to="{ path: '/case/detail', query: { id: scope.row.id }}">详情</router-link>
                            </permission>
                            <permission permission-key="caseExamine:tongGuoJiean">
                                <a class="pass" @click="showPassLayer(scope.row.id)">同意</a>
                            </permission>
                            <permission permission-key="caseExamine:juJueJiean">
                                <a class="refuse" @click="showRefuseLayer(scope.row.id)">拒绝</a>
                            </permission>
                        </template>
                    </el-table-column>
                    <el-table-column prop="caseCode" label="编号" width="248">
                    </el-table-column>
                    <el-table-column prop="threadDate" label="线索获取时间" width="155">
                    </el-table-column>
                    <el-table-column prop="cdate" label="案件创建时间" width="155">
                    </el-table-column>
                    <el-table-column prop="applyDate" label="申请时间" width="155">
                    </el-table-column>
                    <el-table-column prop="sourceName" label="来源渠道" width="108">
                    </el-table-column>
                    <el-table-column prop="productName" label="产品类型" width="100">
                    </el-table-column>
                    <el-table-column prop="riskCategoryName" label="风险类别" width="138">
                    </el-table-column>
                    <el-table-column prop="riskTypeName" label="风险类型" width="138">
                    </el-table-column>
                    <el-table-column prop="riskLevelName" label="风险等级" width="78">
                    </el-table-column>
                    <el-table-column prop="reflectName" label="举报人姓名" width="108">
                    </el-table-column>
                    <el-table-column prop="reflectPhone" label="举报人手机号" width="120">
                    </el-table-column>
                    <el-table-column prop="informerSalesDeptName" label="举报人所属营业部" width="150">
                    </el-table-column>
                    <el-table-column prop="beReportedName" label="被举报人姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="beReportedPhone" label="被举报人手机号" width="120">
                    </el-table-column>
                    <el-table-column prop="beReportedBusiness" label="被举报人所属营业部" width="150">
                    </el-table-column>
                    <el-table-column prop="caseTypeName" label="案件类型" width="108">
                    </el-table-column>
                    <el-table-column prop="caseStatusName" label="案件状态" width="100">
                    </el-table-column>
                    <!-- <el-table-column prop="salesDeptName" label="所属分部" width="120">
                </el-table-column> 
                <el-table-column prop="salesDeptPrincipal" label="分部负责人" width="100">
                </el-table-column>-->
                    <el-table-column prop="upperName" label="上一步操作人" width="106">
                    </el-table-column>
                    <el-table-column prop="targetName" label="当前操作人" width="100">
                    </el-table-column>
                </el-table>
                <el-pagination v-if="tableData.total" :current-page="tableData.index" :page-sizes="[tableData.sizes,tableData.sizes*2, tableData.sizes*3, tableData.sizes*4]"
                    :page-size="tableData.size" :total="tableData.total" layout="total, sizes, prev, pager, next, jumper" @size-change="tableSizeChange"
                    @current-change="getTableData">
                </el-pagination>
            </div>
        </div>
        <!-- 同意审批 -->
        <layer :data="passLayer" @on-ok="passSave">
            <el-form :model="passLayer.form">
                <el-form-item label="结案说明">
                    <el-input type="textarea" v-model="passLayer.form.content" placeholder="请输入结案说明"></el-input>
                </el-form-item>
                <template v-if="targetActive">
                    <el-form-item label="选择角色" class="is-required">
                        <el-select v-model="roleForm.name" placeholder="请选择角色" @change="selectRole">
                            <el-option v-for="item in roleList" :key="item.nextRoleId" :label="item.nextRoleName" :value="item.nextRoleId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择审批人" class="is-required">
                        <el-select v-model="targetForm.id" placeholder="请选择审批人">
                            <el-option v-for="item in superiorUser" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </template>
            </el-form>
        </layer>
        <!-- 拒绝审批 -->
        <layer :data="refuseLayer" @on-ok="refuseSave">
            <el-form :model="refuseLayer.form">
                <el-form-item label="拒绝原因" class="is-required">
                    <el-input type="textarea" v-model="refuseLayer.form.content" placeholder="请输入拒绝原因"></el-input>
                </el-form-item>
            </el-form>
        </layer>
        <!-- 查看内容 -->
        <layer :data="viewContentLayer">
            <div class="view-box">{{viewContentLayer.content}}</div>
        </layer>
    </div>
</template>
<script>
    import './proposal.less'
    import approvalMixin from '@/mixins/approval'
    export default {
        name: 'close',
        mixins: [approvalMixin],
        data() {
            return {
                // 同意审批
                passLayer: {
                    id: 0,
                    show: false,
                    title: '同意',
                    form: {}
                },
                // 拒绝审批
                refuseLayer: {
                    id: 0,
                    show: false,
                    title: '拒绝',
                    form: {}
                }
            }
        },
        mounted() {
            this.$store.dispatch('setBreadData', [
                {
                    name: '流程审批'
                },
                {
                    name: '结案案件审批'
                }
            ])
            this.tableData.status = 6
            this.getTableData(1)
        },
        methods: {
            // 显示同意审批
            showPassLayer(id) {
                this.passLayer.show = true
                this.passLayer.id = id
                this.passLayer.form = {}
                this.queryRoleList(4)
            },
            // 提交同意审批
            passSave() {
                if (!this.targetActive) {
                    this.targetForm.id = this.userInfo.id
                }
                if (!this.targetForm.id) {
                    this.$msg.error('请选择审批人')
                    return false
                }
                api.updateCaseExamine({
                    id: this.passLayer.id,
                    targetId: this.targetForm.id,
                    operationType: 5,
                    examineType: 1,
                    content: this.passLayer.form.content
                }).then(res => {
                    this.$msg.success('同意审批成功')
                    this.$store.dispatch('getUnProcess')
                    this.passLayer.show = false
                    this.sumbitFilter()
                }).catch(res => {
                    console.log(res)
                })
            },
            // 显示拒绝审批
            showRefuseLayer(id) {
                this.refuseLayer.show = true
                this.refuseLayer.id = id
                this.refuseLayer.form = {}
            },
            // 提交拒绝审批
            refuseSave() {
                if (!this.refuseLayer.form.content) {
                    this.$msg.error('请输入拒绝原因')
                    return false
                }
                api.updateCaseExamine({
                    id: this.refuseLayer.id,
                    operationType: 5,
                    examineType: 2,
                    content: this.refuseLayer.form.content,
                    targetId: this.userInfo.id
                }).then(res => {
                    this.$msg.success('拒绝审批成功')
                    this.$store.dispatch('getUnProcess')
                    this.refuseLayer.show = false
                    this.sumbitFilter()
                }).catch(res => {
                    console.log(res)
                })
            }
        }
    }
</script>